
import React, { Component } from 'react'
import styles from "./Edit.module.scss"
import { EyeOutlined } from '@ant-design/icons';
import Details from './Details';
import Edit from "./Edit";
import axios from 'axios';
//图标
import {
    ZoomOutOutlined,
    CaretLeftOutlined,
    CaretRightOutlined
} from '@ant-design/icons';
import { DeleteOutlined, FormOutlined, ExclamationOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';

export default class Stockcontrol extends Component {
    constructor() {
        super()
        this.state = {
            pallsy: [],//渲染数据
            goodsarr: [],//接收axios数据
            isbool: false,
            xiangqingobj: {},
            dangqian: 1,
            meiye: 6,
            zongshu: "",
            zongye: []
        }
        this.good = this.good.bind(this);
    }
    good(a) {
        let god = this.state.goodsarr.slice((a - 1) * this.state.meiye, (a - 1) * this.state.meiye + this.state.meiye);
        this.setState({
            pallsy: god
        })

    }
    indexbtn(i) {
        this.setState({
            dangqian: i
        })
        this.good(i)
    }
    topbtn = () => {
        if(this.state.dangqian>1){
            let list = this.state.dangqian-1
            this.good(this.state.dangqian-1)
            this.setState({
                dangqian:list
            })
        }else{
            alert("已经是第一页了")
        }
    }
    nestbtn = () => {
        if(this.state.zongye.length>this.state.dangqian){
            let list = this.state.dangqian+1
            this.good(this.state.dangqian+1)
            this.setState({
                dangqian:list
            })
        }else{
            alert("已经是最后一页了")
        }
    }
    shou=()=>{
        this.good(1)
    }
    mo=()=>{
        this.good(this.state.zongye.length)
    }
    geensearchssss = (event) => {
        console.log(event)
        this.setState({
            [event.target.name]: event.target.value,
        })
    }
    geensearch = () => {
        let reg = new RegExp(this.state.search);
        let regs = this.state.goodsarr;
        let regb = [];
        for (let i = 0; i < regs.length; i++) {
            let obj = {}
            obj.goodsID = regs[i].goodsID;
            obj.brand = regs[i].brand;
            obj.goodsName = regs[i].goodsName;
            obj.model = regs[i].model;
            obj.category = regs[i].category;
            obj.intoDatetime = regs[i].intoDatetime;
            obj.quantity = regs[i].quantity;
            obj.price = regs[i].price;
            if (reg.test(JSON.stringify(obj))) {
                regb.push(regs[i])
            }
        }
        this.setState({
            pallsy: regb
        })
    }
    //升序和降序
    risegoodsID = () => {

        this.state.pallsy.sort(function (a, b) {
            return b.goodsID - a.goodsID
        })
        this.setState({
            pallsy: this.state.pallsy
        })
    }
    dropgoodsID = () => {

        this.state.pallsy.sort(function (a, b) {
            return a.goodsID - b.goodsID
        })
        this.setState({
            pallsy: this.state.pallsy
        })
    }
    risequantity = () => {

        this.state.pallsy.sort(function (a, b) {
            return b.quantity - a.quantity
        })
        this.setState({
            pallsy: this.state.pallsy
        })
    }
    dropquantity = () => {

        this.state.pallsy.sort(function (a, b) {
            return a.quantity - b.quantity
        })
        this.setState({
            pallsy: this.state.pallsy
        })
    }
    riseprice = () => {

        this.state.pallsy.sort(function (a, b) {
            return b.price - a.price
        })
        this.setState({
            pallsy: this.state.pallsy
        })
    }
    dropprice = () => {

        this.state.pallsy.sort(function (a, b) {
            return a.price - b.price
        })
        this.setState({
            pallsy: this.state.pallsy
        })
    }
    //详情
    Details(item) {
        this.setState({
            isbool: true,
            xiangqingobj: item
        })
    }
    closexiangqing = () => {
        this.setState({
            isbool: false
        })
    }
    //修改

    Edit(index) {
        this.setState({
            isbool: true,
            xiangqingobj: index
        })
    }
    //删除
    del(index) {
        // console.log(index)
        axios.get(`http://class.aulence.com/store-manage/w2003/goods-manage-g4/goods-delete.php?goodsID=` + this.state.goodsarr[index].goodsID)
            .then(res => {
                alert(res.data);
                console.log(res);
                window.location.reload()
            }).catch(err => {
            console.error(err);
        });
    }
    //数据请求拿到数据
    componentDidMount() {
        axios.get("http://class.aulence.com/store-manage/w2003/goods-manage-g4/goods-info.php").then(res => {
            let sbyu = Math.ceil(res.data.length / this.state.meiye);
            let sbyua = [];
            for (let i = 0; i < sbyu; i++) {
                sbyua.push(i)
            }
            this.setState({
                zongye: sbyua
            })
            // console.log(sbyua)
            // console.log(res.data)
            this.setState({
                goodsarr: res.data,
                pallsy: res.data
            })
            if (!res.data.length) {
                alert('目前没有商品数据，请先添加至少一条商品数据！');
                return;
            }
            this.indexbtn(1)
        }).catch(err => {
            console.error(err);
        });
    }
    render() {
        return (

            <div className={styles.mains}>
                <p><EyeOutlined />商品信息管理</p>
                <div className={styles.search}>
                    <input type="text" placeholder="请输入商品名称..." name='search' value={this.state.search} onChange={this.geensearchssss} />
                    <button><ZoomOutOutlined className={styles.as} onClick={this.geensearch} /></button>
                </div>
                <table id="tableID">
                    <thead>
                    <tr>
                        <td>序号<CaretUpOutlined className={styles.as} onClick={this.risegoodsID} /><CaretDownOutlined className={styles.ab} onClick={this.dropgoodsID} /></td>
                        <td>品牌</td>
                        <td>名称</td>
                        <td>型号</td>
                        <td>分类</td>
                        <td>入库时间</td>
                        <td>数量<CaretUpOutlined className={styles.as} onClick={this.risequantity} /><CaretDownOutlined className={styles.ab} onClick={this.dropquantity} /></td>
                        <td>单价<CaretUpOutlined className={styles.as} onClick={this.riseprice} /><CaretDownOutlined className={styles.ab} onClick={this.dropprice} /></td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody>
                    {this.state.pallsy.map((item, index) =>
                        <tr key={index}>
                            <td>{item.goodsID}</td>
                            <td>{item.brand}</td>
                            <td>{item.goodsName}</td>
                            <td>{item.model}</td>
                            <td>{item.category}</td>
                            <td>{item.intoDatetime}</td>
                            <td>{item.quantity}</td>
                            <td>{item.price}</td>
                            <td className={styles.caozuo}>
                                <span className={styles.xiangqing} onClick={() => this.Details(item)} >详情</span>
                                <span className={styles.xiugai} onClick={() => this.Edit(index)} >修改</span>
                                <span className={styles.shanchu} onClick={() => this.del(index)} >删除</span>
                            </td>
                        </tr>)}
                    </tbody>
                </table>
                <div className={styles.pagin}>
                    <div className={styles.pagins}>
                        <span className={styles.lapy}>
                            <span>---当前第1页---</span>
                            <span>共有2页</span>
                        </span>
                        <button type="button" onClick={this.shou}>首页</button>
                        <button onClick={this.topbtn}><CaretLeftOutlined className={styles.ned} /></button>
                        <span className={styles.group}>
                            {this.state.zongye.map((v, i) => <button key={v} onClick={() => this.indexbtn(i + 1)} type="button" className={styles.active}>{i + 1}</button>)}
                        </span>
                        <button onClick={this.nestbtn} className={styles.ton}><CaretRightOutlined className={styles.ac} /></button>
                        <button type="button" className={styles.activess} onClick={this.mo}>末页</button>
                        <span className={styles.page}>
                            <span>跳到</span>
                            <input type="number" />
                            <span>页</span>
                            <button>跳转</button>
                        </span>
                    </div>
                </div>
                {this.state.isbool ? <Details item={this.state.xiangqingobj} close={this.closexiangqing}></Details> : null}
            </div>
        )
    }
}

